<template>
  <div class="ipList">
    <div class="topTitle">
      IP黑名单
      <div style="float:right">
        <el-button @click="addFun" size="mini">添加</el-button>
        <el-button type="primary" @click="queryList" size="mini">刷新</el-button>
      </div>
    </div>
    <div style="height:400px">
    <configTable
        ref="table"
        :headers="tableHeader"
        :data="tableData"
        :pagingData="tablePages"
        @pageChange="currentChangeFun"
        @pageSizeChange="sizeChange"
        @checkHeadersChange="checkHeadersChange"
        :batchs="batchs"
        :selection="true"
        @batchClick="batchClick"
      >
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
              v-if="item.prop !== 'oprate'"
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="item.width + 'px'"
              :resizable="false"
              :sortable="item.sortable"
              :show-overflow-tooltip="true"
            >
            </u-table-column>
            <u-table-column
              v-if="item.prop === 'oprate'"
              :key="index"
              :label="item.label"
              :width="100"
              fixed="right"
            >
              <template slot-scope="scope">
                 <span class="oprate-span" @click="editFun(scope.row)">编辑</span>
                <span class="oprate-span red-span" @click="deleteFun(scope.row)">删除</span>
              </template>
            </u-table-column>
          </template>
        </template>
      </configTable>
      </div>
      <ip-dialog ref="ipDialog" @getData="getData"></ip-dialog>
  </div>
</template>

<script lang="ts">
/**
 * ip黑名单列表组件
 */
import { Component, Ref, Vue } from 'vue-property-decorator';
import configTable from '@/components/configCommon/table.vue'
import IpDialog from './ipDialog.vue'
import { commonAction } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'IpList',
  components: { configTable, IpDialog }
})
export default class IpList extends Vue {
  [x: string]: any
  @Ref() private readonly ipDialog: any
  @Ref() private readonly table: any
  private tableData: any = []
  private checkHeaders: [] = []
  private tableHeader: any = [
    { label: 'IP地址', prop: 'ip' },
    { label: '创建时间', prop: 'createTime', sortable: true },
    { label: '操作坐席', prop: 'createUser' },
    { label: '更新时间', prop: 'updateTime', sortable: true },
    { label: '更新人', prop: 'updateUser' },
    { label: '操作', prop: 'oprate' }
  ]

  private tablePages: any = {
    current: 1,
    pageSize: 10,
    total: 0
  }

  private mounted () {
    this.queryList()
  }

  private getData () {
    this.tablePages.page = 1
    this.queryList()
  }

  private getAgentName (agentId) {
    const agent = (CommonModule as any).publicCache.userListObj[agentId]
    if (agent) {
      return agent.name
    }
    return ''
  }

  private async queryList () {
    this.table.cancelSelectFun()
    const params = { url: '/im-center/action/blacklist/queryIpRangeConfig', method: 'POST', data: { page: this.tablePages.current, limit: this.tablePages.pageSize } }
    const result: any = await commonAction(params)
    if (result.success) {
      const { data } = result
      this.tableData = data.list.map(v => {
        const ip = v.ipBegin + '-' + v.ipEnd
        const createUser = this.getAgentName(v.createUser)
        const updateUser = this.getAgentName(v.updateUser)
        return {
          ...v,
          ip,
          createUser,
          updateUser
        }
      })
      this.tablePages.total = data.count
    }
  }

  private checkHeadersChange (checkList) {
    this.$set(this, 'checkHeaders', checkList)
  }

  private sizeChange (size: number) {
    this.tablePages.pageSize = size
    this.queryList()
  }

  private currentChangeFun (page: number) {
    this.tablePages.current = page
    this.queryList()
  }

  private batchs: any = [
    {
      name: '批量删除',
      action: 'delete'
    }
  ]

  private batchClick (action: string, selectList: any) {
    const params: any = { url: '/im-center/action/blacklist/deleteIpRangeConfig', method: 'POST' }
    if (selectList === true) {
      params.url = '/im-center/action/blacklist/deleteAllIpRangeConfig'
    } else {
      params.data = {
        _ids: selectList
      }
    }
    switch (action) {
      case 'delete':
        this.$confirm('确定批量删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const result: any = await commonAction(params)
          if (result.success) {
            this.$message.success('删除成功')
            this.queryList()
          }
        })
        break
    }
  }

  private editFun (row) {
    this.ipDialog.openIp({
      _id: row._id,
      ipBegin: row.ipBegin,
      ipEnd: row.ipEnd
    }, 'edit')
  }

  private addFun () {
    this.ipDialog.openIp({}, 'add')
  }

  private deleteFun (row) {
    this.$confirm(`确定要删除【${row.ip}】吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const params = { url: '/im-center/action/blacklist/deleteIpRangeConfig', method: 'POST', data: { _ids: [row._id] } }
      const result: any = await commonAction(params)
      if (result.success) {
        this.$message.success('删除成功')
        this.queryList()
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.ipList
  .topTitle
    line-height: 32px
    margin-bottom: 6px
    color #303753
    font-weight 500
    font-size: 14px
  .oprate-span
    cursor pointer
    color $c-main
    margin 0 4px
  .red-span,.disable-span
    color $c-danger
</style>
